<template>
  <div>
      <div class="box">
         
          <div class="obox">
            <router-link to="/home/actual/newest"><span>&lt;</span> </router-link> 

           </div>
          
          <div class="oimg">
            <img src="/oimg/6.png" alt="">
            <p class="tit">Python操作三大主流数据库 实战网易新闻客户端 <br> 
                <span>NavCat | Python全栈工程师</span>
            </p>
            <div class="top">
              <div class="otop"> top</div>
               <div class="new">新课榜 第三名</div>
            </div>
            <span class="money">币268.00</span>
          </div>
      </div>
<!-- 内容 -->
      <div class="conmit">
          <div class="kecheng">
             <div class="difficulty">
              <ul class="man">
                <li>内容</li>
                <li>课程难度</li>
                <li>视频时长</li>
                <li>学习人数</li>
                <li>课程评分</li>
              </ul>
              <div class="Basics">
                <ul class="hor">
                  <li>零基础</li>
                  <li>23小时</li>
                  <li>89人</li>
                  <li>10.00分</li>
                </ul>
              </div>
             </div>
          </div>
      </div>

    <!-- 促销 -->
    <div class="Promotion">
        <div class="promotion">
          <ul>
            <li>促销</li>
            <li>满299减50</li>
            <li>满499减一百</li>
            <li>满999减248</li>
           <li class="juan"> <van-cell is-link @click="showPopup">去领卷> </van-cell></li>
            <van-popup v-model="show" position="bottom" :style="{ height: '30%' }" />
          </ul>
        </div>
    </div>
    <div class="activity">
      <ul>
        <li>活动</li>
        <li>618夏日发光季，实战课满减大放送，专享超值满额优惠券，凑单更划算！</li>
        <li> 查看></li>
      </ul>
    </div>
    <!-- 简介 -->

<div class="brief" >
      <van-sticky :offset-top="20"> 
        <ul class="oul">
        <li @click= "func(i)" type="primary"   v-for="(v,i) in arr" :key="i" :class="arr[i].bool?'red':''">{{v.title}}</li> 
      </ul>
       </van-sticky>
      <component :is="tem"></component>
    </div>

    <div>
        <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
        <van-goods-action-icon icon="cart-o" text="购物车" @click="goodscat()" />
        <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
        <van-goods-action-button type="warning" text="加入购物车" @click="shopping()"/>
        <van-goods-action-button type="danger" text="立即购买" @click="shoppingdown()"/>
        </van-goods-action>
      </div>
      
  </div>
</template>

<script>
import { Toast } from 'vant';

import Brief from "@/components/dong/brief.vue"
import Catalogue from "@/components/dong/catalogue.vue"
import Evaluate from "@/components/dong/evaluate.vue"
import Meal from "@/components/dong/meal.vue"
import Service from "@/components/dong/service.vue"
import{postdatalink} from "@/api/postapi.js"
export default {
  
    data(){
    return{
    tem:"Brief",
    show: false,
     arr:[{tem:"Brief",bool:true,title:"简介"},
          {tem:"Catalogue",bool:false,title:"目录"},
          {tem:"Service",bool:false,title:"服务"},
          {tem:"Evaluate",bool:false,title:"评价"},
          {tem:"Meal",bool:false,title:"套餐"},
]
    }
  },
  methods:{
    func(i){
      this.arr.forEach(v => {
          v.bool=false;
      });
      console.log("aaaa");
      this.arr[i].bool=!this.arr[i].bool;
      this.tem=this.arr[i].tem;

    },
    onClickIcon() {
      Toast('点击图标');
    },
    onClickButton() {
      Toast('点击按钮');
    },
    showPopup() {
      this.show = true;
    },
    goodscat(){
      this.$router.push("/shop")
    },
    shopping(){
      let usp=new URLSearchParams()
    usp.append("total_money","3690");
    usp.append("goods_id",9);
    postdatalink("/api/add_cart/",usp).then((ok)=>{
         console.log(ok)
          if(ok.data.msg == "添加商品成功"){
              alert("添加成功")
          }else if(ok.data.msg == "该商品已在购物车内"){
              alert("该商品已在购物车内");
          }
          else{
            alert("添加失败");
          }
       }) 
    },
    shoppingdown(){
      let usp=new URLSearchParams()
    usp.append("goods_id",9);
    usp.append("price","3690");
    postdatalink("/api/buy/",usp).then((ok)=>{
         console.log(ok)
          if(ok.data.msg == "购买成功"){
              alert("购买成功")
          }else if(ok.data.mag == "您已成功购买,您可直接学习"){
              alert("您已成功购买,您可直接学习");
          }
          else{
              alert("购买失败");
          }
       }) 
    
    }
  },
  components:{
    Brief,Catalogue,Evaluate,Meal,Service
  }
}
</script>

<style scoped>
.oul{
  display: flex;
  justify-content: space-evenly;
  height: .38rem;
  background-color: white;
  font-size: .13rem;
  line-height: .38rem;
}
  .juan{
    margin-bottom: 20px;
  }
    .box{
      width: 3.5rem;
      height: 1.83rem;
      /* background-color:aqua; */
      margin: auto;
      
      
    }
    .obox{
      width: 100%;
      height: .25rem;
      background-color:white;
      position: fixed;
      z-index: 1;
      padding-bottom: .2rem;
    }
    .oimg{
      width: 100%;
      padding-top: 0.3rem;
      position: relative;
    }
    img{
      width: .97rem;
      height: 1.3rem;
      
    }
    .tit{
      font-size: .14rem;
      position: absolute;
      top: .28rem;
      left: 1.07rem;
    }
    span{
      font-size: .1rem;
      color: #6f7170;
      margin-top: .1rem;
    }
    .top{
      border-radius:.03rem;
      width: 1.14rem;
      height: .18rem;
      background-color: #63b88b;
      position: absolute;
      top: .9rem;
      left: 1.08rem;
      color: white;
      font-size: 10px;
      font-weight: bold;
    }
    .otop{
      width: .28rem;
      height: 100%;
      background-color:#73d390;
      color: white;
      font-weight: bold;
    }
    .new{
      width: .80rem;
      margin-left: .32rem;
      color: white;
      font-weight: bold;
      position: absolute;
      top: 0;
    }
    .conmit{
      width: 100%;
      height: .74rem;
      margin: auto;
      border-bottom: 1px solid #c2c2c2;
    }
    .kecheng{
      width: 3.5rem;
      height: 100%;
      margin: auto;
    }
    .money{
      color: #f73412;
      font-size: 14px;
      font-weight: bold;
      margin-left: .14rem;
    }
    .difficulty{
        width: 100%;
        height: .15rem;
        padding-top: .2rem;
    }
    .man{
      display: flex;
      justify-content:space-evenly;
      font-size: .14rem;
      width: 100%;
      color: #6f6f71;
    }
    .Basics{
      width: 2.73rem;
      height: .35rem;
      margin: auto;
    }
    .hor{
      display: flex;
      justify-content:space-evenly;
      font-size: .14rem;
      width: 100%;
      line-height: .35rem;
      font-weight: bold;
    }
    .Promotion{
      width: 100%;
      height: .51rem;
      /* background-color: yellow; */
      border-bottom: 1px solid #c2c2c2;
    }
    .promotion{
      width: 3.5rem;
      height: 100%;
      margin: auto;
      /* background-color: aqua; */
    }
    .promotion>ul{
      /* line-height: .51rem; */
      font-size: .1rem;
      display: flex;
      
      justify-content: space-evenly;
     
    }
    .promotion>ul>li{
      font-weight: bold;
      color: red;
      margin-top: .15rem;
      height: .15rem;
      background-color: #ffe3f2;
      border-radius: 10px;
    }
    .promotion>ul>li:nth-child(1){
      background-color:white;
      color: #6f6f71;
    }
    .activity{
      width: 100%;
      height: .7rem;
      border-bottom: 1px solid #c2c2c2;
    }
    .activity>ul{
      font-size: .1rem;
      display: flex;
      justify-content: space-evenly;
      margin-top: .18rem ;
    }
    
    .activity>ul>li:nth-child(2){
      width: 2.41rem;
      color: #7d7d7d;
    }
     .activity>ul>li:nth-child(1){
       color: #c5c5c5;
       margin-left: .11rem;
     }
     .activity>ul>li:nth-child(3){
       color: red;
     }
     .brief {
       width: 3.5rem;
       height: .43rem;
       margin: auto;
      
     }
     .brief>ul{
       display: flex;
       justify-content: space-evenly;
       position: sticky;
       top: 0;
      
     }
     .brief>ul>li{
       font-size: .14rem;
       line-height: .43rem;
     }
     .red{
       color: red;
     }
   
</style>